﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Debug Tools </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Debug Tools ">
    <meta name="generator" content="docfx 2.40.7.0">
    
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../styles/docfx.css">
    <link rel="stylesheet" href="../styles/main.css">
    <meta property="docfx:navrel" content="../toc.html">
    <meta property="docfx:tocrel" content="toc.html">
    
    
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../index.html">
                <img id="logo" class="svg" src="../logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">

<a href="https://github.com/NeutroniumCore/Neutronium" target="_blank">
  <img style="position: fixed; top: 0; right: 0; border: 0; z-index:99999" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
</a>
<h1 id="debug-tools">Debug Tools</h1>
<h2 id="interactive-debug">Interactive Debug</h2>
<p>Note: To activate Debug mode for <code>HTLMLWindow</code> or <code>HTMLViewControl</code> set the property IsDebug as true</p>
<p>In debug mode, the following context menu will be displayed:</p>
<p><img src="../images/tools/ContextMenu.png" alt="debug buttons"></p>
<h3 id="1-inspect">1. Inspect</h3>
<p>Opens a fully featured chromium javascript debug windows</p>
<p><img src="../images/tools/ContextMenu-inspect.png" alt="inspect"></p>
<p><img src="../images/tools/DebugInspect.png" alt="inspect"></p>
<h3 id="2-vm-debug">2 Vm Debug</h3>
<p>Opens a javascript framework specific window to display information about the binding:</p>
<p><img src="../images/tools/ContextMenu-Vm-debug.png" alt="InspectVM"></p>
<ul>
<li>For Vue.js</li>
</ul>
<p>The <a href="https://github.com/vuejs/vue-devtools">vue chrome debug tool</a> is opened in new window</p>
<p><img src="../images/tools/VueTools2.png" alt="vue-devtools"></p>
<p><img src="../images/tools/VueTools.png" alt="vue-devtools"></p>
<ul>
<li>For Knockout</li>
</ul>
<p>An adaption of [knockout-view] a debug tool <a href="https://github.com/jmeas/knockout-view">displaying ViewModel is used</a></p>
<h3 id="3-save-vm">3 Save Vm</h3>
<p><img src="../images/tools/ContextMenu-Save-vm.png" alt="SaveVM"></p>
<p>Allows to save the value of the bound DataContext to a circular JSON (<code>.cjson</code>). This is a very interesting feature when coupled with <a href="../tools/vue-cli-plugin.html">neutronium vue webpack template</a>. Indeed neutronium Webpack configuration can use this files as &quot;fake&quot; ViewModel.</p>
<p>This is very powerful when coupled with live reload feature as saving a ViewModel will update the corresponding browser when using <code>npm run dev</code>.</p>
<h3 id="4-about">4 About</h3>
<p>Opens a windows displaying information about Neutronium configuration:</p>
<p><img src="../images/tools/ContextMenu-About.png" alt="About"></p>
<p><img src="../images/tools/about-64-bits.png" alt="About"></p>
<h2 id="trace">Trace</h2>
<p>By default, Neutronium will use the trace listener to log events.
Neutronium will log binding errors as well as console.log message from the HTML session.</p>
<p>If you need to use a different logger to output the Neutronium events you can implement your own IWebSessionLogger:</p>
<pre><code class="lang-CSharp">    public interface IWebSessionLogger
    {
        /// &lt;summary&gt;
        /// Called for debug logging
        /// &lt;/summary&gt;
        void Debug(Func&lt;string&gt; information);

        /// &lt;summary&gt;
        /// Called for debug logging
        /// &lt;/summary&gt;
        void Debug(string information);

        /// &lt;summary&gt;
        /// Called for information logging
        /// &lt;/summary&gt;
        void Info(string information);

        /// &lt;summary&gt;
        /// called for information logging 
        /// &lt;/summary&gt;
        void Info(Func&lt;string&gt; information);

        /// &lt;summary&gt;
        /// Called for warning 
        /// &lt;/summary&gt;
        void Warning(string information);

        /// &lt;summary&gt;
        /// Called for warning 
        /// &lt;/summary&gt;
        void Warning(Func&lt;string&gt; information);

        /// &lt;summary&gt;
        /// Called on critical event 
        /// &lt;/summary&gt;
        void Error(string information);

        /// &lt;summary&gt;
        /// Called on critical event 
        /// &lt;/summary&gt;
        void Error(Func&lt;string&gt; information);

        /// &lt;summary&gt;
        /// Called on each console log called by browser 
        /// &lt;/summary&gt;
        void LogBrowser(ConsoleMessageArgs information, Uri url);

        /// &lt;summary&gt;
        /// Called in case of browser critical error
        /// &lt;/summary&gt;
        /// &lt;param name=&quot;exception&quot;&gt;
        /// Exception responsible for the error
        /// &lt;/param&gt;
        /// &lt;param name=&quot;cancel&quot;&gt;
        /// Action to be called to cancel browser closing,
        /// has an effect only with Awesomium
        /// &lt;/param&gt;
        void WebBrowserError(Exception exception, Action cancel);
    }
}

</code></pre>
<p>And then setting Neutronium Engine session logger:</p>
<pre><code class="lang-CSharp">var myLogger = new MyLogger();
HTMLEngineFactory.Engine.WebSessionLogger = myLogger;

</code></pre>
</article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="https://github.com/NeutroniumCore/Neutronium/blob/master/Documentation/Neutronium.Documentation/articles/debug.md/#L1" class="contribution-link">Improve this Doc</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            
            <span>Generated by <strong>DocFX</strong></span>
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../styles/docfx.js"></script>
    <script type="text/javascript" src="../styles/main.js"></script>
  </body>
</html>
